<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>facebox创视-全国酒店分布</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
    <link rel="stylesheet" href="../layui-admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui-admin/style/admin.css" media="all">
    <style>
        body,
        html,
        #all-chart {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            position: absolute;
            background: url(../views/admin/img/bg.png) no-repeat center center;
            background-size: cover;
        }

        #all-map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            position: absolute;
            display: none;
        }

        #all-map-info {
            position: relative;
            left: 10px;
            top: 10px;
            width: 320px;
            display: none;
        }

        #all-map-img {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 350px;
            display: none;
        }

        #all-hotel-info {
            position: absolute;
            left: 10px;
            top: 0px;
            width: 320px;
            height: 240px;
        }

        #all-ad-img {
            position: absolute;
            left: 30px;
            bottom: 0px;
            width: 320px;
            height: 265px;
            background: url(img/team.png) no-repeat center center;
            background-size: 320px 265px;
        }

        #all-ad-img-team {
            position: absolute;
            left: 17px;
            bottom: 78px;
            width: 287px;
            height: 160px;
        }

        #all-face-img {
            position: absolute;
            right: 10px;
            top: 260px;
            width: 320px;
            height: 240px;
            box-shadow: darkgray 0px 0px 10px;
        }

        #all-hotel-img {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 320px;
            height: 240px;
            box-shadow: darkgray 0px 0px 10px;
        }
    </style>
</head>
<body>
<div id="all-chart"></div>
<div id="all-hotel-info">
    <table id="hotel-info" class="layui-table"></table>
</div>
<div id="all-ad-img">
    <div id="all-ad-img-team">
        <div class="layui-carousel" id="ad-img">
            <div carousel-item="" id="ad-img-item"></div>
        </div>
    </div>
</div>
<div id="all-face-img">
    <div class="layui-carousel" id="face-img">
        <div carousel-item="" id="face-img-item"></div>
    </div>
</div>
<div id="all-hotel-img">
    <div class="layui-carousel" id="hotel-img">
        <div carousel-item="" id="hotel-img-item"></div>
    </div>
</div>
<div id="all-map"></div>
<div id="all-map-info">
    <div class="layui-card">
        <div class="layui-card-header layui-icon layui-icon-search">
            搜索结果
            <i id="map-info-close" class="layui-icon layui-icon-close" lay-offset="5" style="cursor:pointer;"></i>
        </div>
        <div id="map-info" class="layui-card-body" style="height:500px;overflow:auto;">
        </div>
    </div>
</div>
<div id="all-map-img">
    <div class="layui-card">
        <div class="layui-card-header layui-icon layui-icon-location">
            <a id="map-img-title" href="javascript:;"></a>
            <i id="map-img-close" class="layui-icon layui-icon-close" lay-offset="5" style="cursor:pointer;"></i>
        </div>
        <div class="layui-card-body">
            <div class="layui-carousel" id="map-img">
                <div carousel-item="" id="map-img-item"></div>
            </div>
        </div>
    </div>
</div>
<script src="../layui-admin/layui/layui.js"></script>
<script src="../echarts/echarts.min.js"></script>
<script src="https://api.map.baidu.com/api?v=3.0&ak=F4397f39c2f8356477d143612f1903da"></script>
<script>
    const chinaCode = '100000';
    const cityMap = {
        "中国": chinaCode
        , "北京": "110100"
        , "河北": "130000"
        , "石家庄市": "130100"
        , "广东": "440000"
        , "广州市": "440100"
        , "白云区": "440111"
        , "深圳市": "440300"
        , "珠海市": "440400"
        , "海南": "460000"
        , "海口市": "460100"
    };
    const allMap = new BMap.Map("all-map");
    allMap.enableScrollWheelZoom(true);

    const allChart = echarts.init(document.getElementById('all-chart'), 'light');
    const allChartOption = {
        title: {
            text: 'facebox创视-全国酒店分布'
            , subtext: '全国酒店分布统计'
            , left: 'center'
            , textStyle: {
                color: '#fff'
                , fontSize: 24
            }
        }
        , tooltip: {
            trigger: 'item'
        }
        , dataRange: {
            min: 0
            , max: 10000
            , text: ['高', '低']
            , splitNumber: 0
            , textStyle: {
                color: '#fff'
            }
        }
        , series: [
            {
                name: '全国酒店分布统计'
                , type: 'map'
                , mapType: chinaCode
                , label: {
                    show: true
                }
                , itemStyle: {
                    color: 'purple'
                    , shadowBlur: 10
                    , shadowColor: '#333'
                }
            }
        ]
    };

    layui.config({
        base: '../layui-admin/'
    }).extend({
        index: 'lib/index'
    }).use(['index'], function () {
        const $ = layui.$;
        const admin = layui.admin;
        const util = layui.util;
        const table = layui.table;
        const layer = layui.layer;
        const carousel = layui.carousel;

        const adImg = carousel.render({
            elem: '#ad-img'
            , width: 287
            , height: 160
            , interval: 1990
            , anim: 'fade'
        });
        const faceImg = carousel.render({
            elem: '#face-img'
            , width: 320
            , height: 240
            , interval: 1660
            , anim: 'fade'
        });
        const hotelImg = carousel.render({
            elem: '#hotel-img'
            , width: 320
            , height: 240
            , interval: 1330
            , anim: 'fade'
        });
        const mapImg = carousel.render({
            elem: '#map-img'
            , width: 320
            , height: 240
            , interval: 800
            , anim: 'fade'
        });

        function showChart(code) {
            code = code || chinaCode;
            const load = layer.load();
            $.getJSON('json/' + code + '.json?t=' + new Date().getTime(), function (data) {
                echarts.registerMap(code, data);
                allChartOption.series[0].mapType = code;
                $.getJSON('json/city.data.json?t=' + new Date().getTime(), function (data) {
                    const items = [];
                    $.each(data, function (index, item) {
                        if (item.code === code) {
                            $.each(item.children, function (index, item) {
                                items.push({name: item.name, value: item.hotel.total});
                            });
                            $('#ad-img-item').empty();
                            $('#face-img-item').empty();
                            $('#hotel-img-item').empty();
                            $.each(item.hotel.adImg, function (index, item) {
                                $('#ad-img-item').append('<div><img src="' + item + '" style="width: 100%;height: auto"></div>');
                            });
                            $.each(item.hotel.faceImg, function (index, item) {
                                $('#face-img-item').append('<div><img src="' + item + '" style="width: 100%;height: auto"></div>');
                            });
                            $.each(item.hotel.hotelImg, function (index, item) {
                                $('#hotel-img-item').append('<div><img src="' + item + '" style="width: 100%;height: auto"></div>');
                            });
                            adImg.reload();
                            faceImg.reload();
                            hotelImg.reload();
                        }
                    });
                    table.render({
                        elem: '#hotel-info'
                        , size: 'sm'
                        , skin: 'nob'
                        , cols: [[
                            {field: 'name', title: '区域'}
                            , {field: 'value', title: '数量'}
                        ]]
                        , data: items
                    });
                    allChartOption.series[0].data = items;
                    allChart.setOption(allChartOption, true);
                    layer.close(load);
                }).error(function () {
                    layer.close(load);
                    showChart();
                });
            }).error(function () {
                layer.close(load);
                showChart();
            });
        }

        function showMap(code) {
            $('#all-map').show();
            $('#all-map-info').show();
            $('#map-info').show();
            $('#map-info').empty();
            $('#map-info-close').on('click', function () {
                $('#map-info').toggle();
            });
            allMap.clearOverlays();
            const load = layer.load();
            $.getJSON('json/map.data.json?t=' + new Date().getTime(), function (data) {
                const points = [];
                $.each(data, function (index, item) {
                    console.log(item);
                    const point = new BMap.Point(item.point.lng, item.point.lat);
                    points.push(point);
                    addMapMarker(index, item, point);
                    addMapInfo(index, item, point);
                });
                allMap.setViewport(points);
                layer.close(load);
            }).error(function () {
                layer.close(load);
            });
        }

        function addMapMarker(index, item, point) {
            const marker = new BMap.Marker(point, {title: item.address});
            marker.setIcon(new BMap.Icon("img/marker.png", new BMap.Size(32, 32)));
            marker.setLabel(new BMap.Label(item.name ? item.name : item.address, {offset: new BMap.Size(20, -10)}));
            marker.addEventListener("mouseover", function () {
                marker.setTop(true);
            });
            marker.addEventListener("mouseout", function () {
                marker.setTop(false);
            });
            marker.addEventListener("click", function () {
                addMapInfoWindow(index, item, point);
            });
            allMap.addOverlay(marker);
        }

        function addMapInfo(index, item, point) {
            const html = [];
            html.push('<div id="map-info-' + index + '" class="caller-item" style="cursor:pointer;">');
            html.push('  <div class="caller-main caller-fl">');
            html.push('    <p class="caller-adds"><i class="layui-icon layui-icon-location"></i>' + item.name + '</p>');
            html.push('    <p>地址：' + item.address + '</p>');
            html.push('    <p>坐标：' + item.point.lng + ',' + item.point.lat + '</p>');
            html.push('  </div>');
            html.push('</div>');
            html.push('<hr class="layui-bg-gray">');
            $('#map-info').append(html.join(''));
            $('#map-info-' + index).on('click', function () {
                addMapInfoWindow(index, item, point);
            });
        }

        function addMapInfoWindow(index, item, point) {
            $('#map-img-item').empty();
            $.each(item.hotel.hotelImg, function (index, item) {
                $('#map-img-item').append('<div><img src="' + item + '" style="width: 100%;height: auto"></div>');
            });
            mapImg.reload();
            allMap.panTo(point);
            $('#all-map-img').show();
            $('#map-img-close').on('click', function () {
                $('#all-map-img').hide();
            });
            $('#map-img-title').html(item.name ? item.name : item.address);
            //allMap.openInfoWindow(new BMap.InfoWindow($('#all-map-img').html(), {title: item.name ? item.name : item.address}), point);
        }

        allChart.on('click', function (params) {
            const name = params.name;
            const code = cityMap[params.name];
            console.log(params);
            console.log(code + ':' + name);
            if ((code || chinaCode).substring(4, 6) !== '00') {
                showMap(code);
            } else {
                allMap.centerAndZoom(name, 12);
                showChart(code);
            }
        });
        admin.resize(function () {
            allChart.resize();
        });
        util.fixbar({
            bar1: '&#xe634;'
            , bar2: '&#xe68e;'
            , click: function (type) {
                console.log(type);
                if (type === 'bar1') {
                    $('#all-ad-img').toggle();
                    $('#all-face-img').toggle();
                    $('#all-hotel-img').toggle();
                }
                if (type === 'bar2') {
                    showChart();
                    $('#all-map').hide();
                    $('#all-map-info').hide();
                    $('#all-map-img').hide();
                }
            }
        });
        showChart();
    });
</script>
</body>
</html>
